import Vue from 'vue'
import store from '@/store'

/**
 * Action 权限指令
 * 指令用法：
 *  - 在需要控制 action 级别权限的组件上使用 v-action:[method] , 如下：
 *    <i-button v-action:add >添加用户</a-button>
 *    <a-button v-action:delete>删除用户</a-button>
 *    <a v-action:edit @click="edit(record)">修改</a>
 *
 *  - 当前用户没有权限时，组件上使用了该指令则会被隐藏
 */
const action = Vue.directive('action', {
  inserted: function(el, binding, vnode) {
    // 当前组件需要的权限
    const actionName = binding.arg

    // 用户具有的permission action
    const permissions = store.getters.permissions
    const actions = store.getters.actions

    // 判断用户是否具有这个菜单权限
    const elVal = vnode.context.$route.meta.permission
    const permissionIds = elVal instanceof String && [elVal] || elVal

    let hasAction = false
    let hasPermission = false

    if (!permissionIds) {
      // 如果没有permission，不要求权限
      hasPermission = true
    } else {
      for (let i = 0; i < permissions.length; i++) {
        const item = permissionIds[i]
        if (permissionIds.includes(item)) {
          hasPermission = true
          break
        }
      }
    }

    for (let i = 0; i < actions.length; i++) {
      const item = actions[i]
      if (item === actionName) {
        hasAction = true
        break
      }
    }

    if (!hasAction || !hasPermission) {
      el.parentNode && el.parentNode.removeChild(el) || (el.style.display = 'none')
    }
  }
})

export default action
